<!-- 产品碳足迹-产品碳足迹 -->

<template>
  <div>
    <div class="m_contentBox">
      <a-card :bordered="false">
        <div class="m_aCardBox">
          <div class="tabBox marBottom">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :span="6">
                    <a-form-model-item :label="$t('message.Product_name')">
                      <a-input
                        class="input"
                        type="text"
                        :placeholder="$t('message.Please_enter')"
                        v-model="queryParam.productName"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item :label="$t('message.Product_category')">
                      <a-select
                        v-model="queryParam.productTypeId"
                        :placeholder="$t('message.Please_select')"
                        show-search
                        :filter-option="filterOption"
                        style="width: 100%"
                      >
                        <a-select-option
                          :value="item.value"
                          v-for="(item, index) in productTypeData"
                          :key="index"
                        >
                          {{ item.text }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6"> </a-col>
                  <a-col :span="6">
                    <a-form-model-item label="" style="">
                      <div
                        style="
                          width: 100%;
                          display: flex;
                          justify-content: flex-end;
                        "
                      >
                        <a-button type="primary" @click="searchQuery">{{
                          $t("message.Search")
                        }}</a-button>
                        <a-button
                          style="margin-left: 8px"
                          @click="searchReset"
                          >{{ $t("message.Reset") }}</a-button
                        >
                      </div>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <div class="optionBox">
            <div class="addBtn m_hoverCP" @click="onAdd">
              {{ $t("message.Add_product") }}
            </div>
          </div>
          <section class="cardBox">
            <div
              class="cardBox_item"
              v-for="(item, index) in dataSource"
              :key="index"
            >
              <a-popconfirm
                :title="$t('message.Confirm_delete')"
                :cancelText="$t('message.Cancel')"
                :okText="$t('message.Confirm')"
                @confirm="() => onDelete(item)"
              >
                <div class="cardBox_item_delBtn m_hoverCP">
                  <img
                    class="cardBox_item_delBtn_img1"
                    src="../../../assets/img/img33.png"
                    alt=""
                  />
                  <img
                    class="cardBox_item_delBtn_img2"
                    src="../../../assets/img/img34.png"
                    alt=""
                  />
                </div>
              </a-popconfirm>
              <div class="" @click="onDetail(item, index)">
                <section class="cardBox_item_box1">
                  <!--                  <img class="cardBox_item_box1_img" :src="item.productPic" alt="">-->
                  <!--                  <div class="cardBox_item_box1_img">-->
                  <!--                    <a-avatar shape="square" :src="getAvatarView(item.productPic)" icon="user"/>-->

                  <!--                  </div>-->
                  <img
                    class="cardBox_item_box1_img"
                    :src="getAvatarView(item.productPic)"
                    alt=""
                  />

                  <div class="cardBox_item_box1_text">
                    <div class="cardBox_item_box1_text1">
                      {{ item.productName || "-" }}
                    </div>
                    <div class="cardBox_item_box1_text2">
                      {{ item.productCode || "-" }}
                    </div>
                  </div>
                </section>
                <section class="cardBox_item_box2">
                  <div class="cardBox_item_box2_item">
                    <div class="cardBox_item_box2_item_label">
                      {{ $t("message.Specifications_and_models") }}：
                    </div>
                    <div class="cardBox_item_box2_item_content">
                      {{ item.productSpecification || "-" }}
                    </div>
                  </div>
                  <div class="cardBox_item_box2_item">
                    <div class="cardBox_item_box2_item_label">
                      {{ $t("message.Unit") }}：
                    </div>
                    <div class="cardBox_item_box2_item_content">
                      {{ item.productUnitName || "-" }}
                    </div>
                  </div>
                  <div class="cardBox_item_box2_item">
                    <div class="cardBox_item_box2_item_label">
                      {{ $t("message.Product_weight") }}：
                    </div>
                    <div class="cardBox_item_box2_item_content">
                      {{ item.productWeight || "-"
                      }}{{ item.productWeightUnit }}
                    </div>
                  </div>
                </section>
                <div class="cardBox_item_hr"></div>
                <section class="cardBox_item_box3">
                  <!-- <div class="cardBox_item_box3_item">
                    <div class="cardBox_item_box3_item_content" style="color:#2c57ff;">
                      {{ item.accountingTotal || '0' }}
                    </div>
                    <div class="cardBox_item_box3_item_label">{{ $t('message.Accounting_has_been_created') }}</div>
                  </div> -->
                  <div class="cardBox_item_box3_item">
                    <div
                      class="cardBox_item_box3_item_content"
                      style="color: #148958"
                    >
                      {{ item.modelTotal || "0" }}
                    </div>
                    <div class="cardBox_item_box3_item_label">
                      {{ $t("message.Model_creation") }}
                    </div>
                  </div>
                  <div class="cardBox_item_box3_item">
                    <div
                      class="cardBox_item_box3_item_content"
                      style="color: #e37318"
                    >
                      {{ item.completeTotal || "0" }}
                    </div>
                    <div class="cardBox_item_box3_item_label">
                      {{ $t("message.Accounting_completion") }}
                    </div>
                  </div>
                  <div class="cardBox_item_box3_item">
                    <div
                      class="cardBox_item_box3_item_content"
                      style="color: #333333"
                    >
                      {{ item.archivedTotal || "0" }}
                    </div>
                    <div class="cardBox_item_box3_item_label">
                      {{ $t("message.Archived") }}
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </section>
        </div>
      </a-card>
    </div>
    <!-- 添加产品弹窗 -->
    <addfootprintProductForm ref="addfootprintProductForm" @back="back" />
    <!-- 详情弹窗 -->
    <section class="m_popupBox" v-if="isShowDetailPopup">
      <footprintProductDetail
        ref="footprintProductDetail"
        @back="back"
        @update="updateData"
      ></footprintProductDetail>
    </section>
  </div>
</template>

<script>
import { get_TPYZ_ProductId, remove_TPYZ_ProductId } from "@/common/storage";
import { getAction, getFileAccessHttpUrl, postAction } from "@/api/manage";
import addfootprintProductForm from "@views/module_footprint/footprintProductView/modules/addfootprintProductForm.vue";
import footprintProductDetail from "@views/module_footprint/footprintProductView/modules/footprintProductDetail.vue";

export default {
  name: "footprintProductView",
  components: {
    addfootprintProductForm,
    footprintProductDetail,
  },
  data() {
    return {
      loading: false,
      queryParam: {

      },
      dataSource: [], // 产品数据
      isShowDetailPopup: false, // 详情弹窗
      productTypeData:[]
    };
  },
  created() {
    // console.log('footprintProductView触发created', this.$route)
    this.getData();
  },
  methods: {
    /**
     * 查询
     */
     searchQuery() {
      console.log("searchQuery");
      this.getData();
    },
    /**
     * 重置
     */
    searchReset() {
      console.log("searchReset");
      this.queryParam = {};
      this.getData();
    },
    /**
     * 下拉框数据过滤
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar);
    },
    /**
     * 添加产品
     */
    onAdd() {
      this.$refs.addfootprintProductForm.getData();
      this.$refs.addfootprintProductForm.visible = true;
    },
    /**
     * 删除产品
     */
    onDelete(item) {
      postAction("/footprintProduct/cyFootprintProduct/delProduct", {
        productId: item.id,
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.getData();
        }
      });
    },
    /**
     * 详情
     */
    onDetail(item, index) {
      console.log("onDetail", item, index);
      this.isShowDetailPopup = true;
      this.$nextTick(() => {
        console.log("onDetail", this.$refs);
        this.$refs.footprintProductDetail.ProductI = index;
        this.$refs.footprintProductDetail.ProductS = this.dataSource;
        this.$refs.footprintProductDetail.getData();
      });
    },
    /**
     * 更新数据
     */
    updateData() {
      getAction(
        "/footprintProduct/cyFootprintProduct/getProductList",
        this.queryParam
      ).then((res) => {
        if (res.success) {
          this.dataSource = res.result || [];
          this.$refs.footprintProductDetail.ProductS = this.dataSource;
        }
      });
    },
    back() {
      this.isShowDetailPopup = false;
      this.getData();
    },
    getData() {
      getAction(
        "/footprintProduct/cyFootprintProduct/getProductList",
        this.queryParam
      ).then((res) => {
        if (res.success) {
          this.dataSource = res.result || [];
          // 从‘产品碳足迹-碳足迹看板’，点击‘查看更多’跳转到‘产品碳足迹-产品碳足迹’打开详情
          if (get_TPYZ_ProductId()) {
            res.result.forEach((item, index) => {
              if (item.id == get_TPYZ_ProductId()) {
                this.onDetail(item, index);
                remove_TPYZ_ProductId();
              }
            });
          }
        }
      });
       // 产品类型
      getAction('/sys/api/getDictItems', {
        dictCode: 'product_type'
      }).then((res) => {
        this.productTypeData = res || []
        console.log('getDictItems product_type =>', res)
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
  background: #f5f8f7;
}
.marBottom {
  margin-bottom: 24px;
}
.tabBox {
  padding: 24px 24px 0;
  background: #ffffff;
  border-radius: 3px;
}

.cardBox {
  margin-top: 16px;
  display: grid;
  // grid-template-columns: repeat(4, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  row-gap: 24px;
  column-gap: 19px;

  .cardBox_item {
    position: relative;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 3px;
    padding: 24px;
  }

  .cardBox_item_box1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cardBox_item_box1_img {
    margin-right: 16px;
    width: 60px;
    height: 60px;
  }

  .cardBox_item_box1_text {
    flex: 1;
  }

  .cardBox_item_box1_text1 {
    width: 80%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-break: anywhere;
  }

  .cardBox_item_box1_text2 {
    width: 80%;
    margin-top: 7px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #888888;
    line-break: anywhere;
  }

  .cardBox_item_delBtn {
    position: absolute;
    z-index: 2;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid #eeeeee;

    img {
      width: 16px;
      height: 16px;
    }

    .cardBox_item_delBtn_img1 {
      display: block;
    }

    .cardBox_item_delBtn_img2 {
      display: none;
    }
  }

  .cardBox_item_delBtn:hover {
    border: 1px solid #148958;

    .cardBox_item_delBtn_img1 {
      display: none;
    }

    .cardBox_item_delBtn_img2 {
      display: block;
    }
  }

  .cardBox_item_box2 {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cardBox_item_box2_item {
  }

  .cardBox_item_box2_item_label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #888888;
  }

  .cardBox_item_box2_item_content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .cardBox_item_hr {
    margin-top: 16px;
    width: 100%;
    height: 1px;
    background: #e7e7e7;
  }

  .cardBox_item_box3 {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cardBox_item_box3_item {
  }

  .cardBox_item_box3_item_content {
    text-align: center;
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 18px;
    color: #148958;
  }

  .cardBox_item_box3_item_label {
    margin-top: 6px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #888888;
  }
}

.optionBox {
  display: flex;
  justify-content: flex-end;
}

.addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  height: 30px;
  background: #148958;
  border-radius: 3px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>
